import React from "react";
import "./index.scss";
import { Icon } from "antd-mobile";
import { ThemeDefault, ThemeLife } from "../../../../tools/theme";

const statusMap = {
	"06": "已结清",
	10: "已逾期",
	"01": "待审批",
	"03": "待放款",
	"04": "借款中",
	"07": "还款中",
	"09": "待还款 ",
	"02": "审批拒绝",
	"05": "放款失败"
};

const LoanItem = React.memo(({ item, onClick }) => (
	<div className="flex loan-item" onClick={onClick}>
		<div>
			<div className="first-line">
				<span className="font-black font-bold">
					借款金额: {item.loanAmt} 元
				</span>

				<ThemeDefault>
					{item.loanStatus === "02" ||
					item.loanStatus === "06" ||
					item.loanStatus === "03" ||
					item.loanStatus === "05" ||
					item.loanStatus === "01" ? (
						""
					) : (
						<span
							className={item.loanStatus == "10" ? "tip-time-yq" : "tip-time"}
						>
							{" "}
							{item.loanStatus == "10"
								? `逾期${item.repayDays}天`
								: `还剩${item.repayDays}天`}{" "}
						</span>
					)}
				</ThemeDefault>
				<ThemeLife>
					{item.loanStatus === "02" ||
					item.loanStatus === "06" ||
					item.loanStatus === "03" ||
					item.loanStatus === "05" ||
					item.loanStatus === "01" ? (
						""
					) : (
						<span
							className={item.loanStatus == "10" ? "tip-time-yq" : "tip-time"}
							style={item.loanStatus == "10" ? {} : { background: "#FFA133" }}
						>
							{" "}
							{item.loanStatus == "10"
								? `逾期${item.repayDays}天`
								: `还剩${item.repayDays}天`}{" "}
						</span>
					)}
				</ThemeLife>
			</div>
			<p className="font-grey">借款时间: {item.loanDate}</p>
		</div>

		<div>
			<div className="flex flex-v-center">
				<ThemeDefault>
					<span>{statusMap[item.loanStatus]}</span>
				</ThemeDefault>
				<ThemeLife>
					<span style={item.loanStatus == "07" ? { color: "#F82633" } : {}}>
						{statusMap[item.loanStatus]}
					</span>
				</ThemeLife>
				<Icon type="right" className="font-grey" />
			</div>
		</div>
	</div>
));

export default LoanItem;
